import 'package:flutter/material.dart';

class DemoPage extends StatefulWidget {
  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  int _counter = 0;

  _onFabButtonClick() {
    print("Click Fab Button");
    setState(() {
      ///将会同步更新UI，在setState中更新变量
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Demo Page -> " + _counter.toString()),
      ),
      body: new ListView.builder(
        itemBuilder: (context, index) {
          return new DemoItem();
        },
        itemCount: 20,
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _onFabButtonClick,
        tooltip: "悬浮按钮",
        child: new Icon(Icons.add),
      ),
    );
  }
}

class DemoItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //卡片包装
      child: new Card(
        //增加点击效果
        child: new FlatButton(
          onPressed: () {
            print("You Click Me");
          },
          child: new Padding(
            padding: new EdgeInsets.all(10.0),
            child: new Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                //文本描述
                new Container(
                  child: new Text(
                    "这是一个简单的描述",
                    style: TextStyle(
                      color: Colors.red,
                      fontSize: 14.0,
                    ),
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                  ),
                  margin: new EdgeInsets.all(8.0),
                  alignment: Alignment.topLeft,
                ),
                new Padding(padding: new EdgeInsets.all(10.0)),

                new Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    _getBottomItem(Icons.star, "1111"),
                    _getBottomItem(Icons.link, "2222"),
                    _getBottomItem(Icons.subject, "3333"),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

///返回一个居中带图标和文本的Item
_getBottomItem(IconData icon, String text) {
  ///充满 Row 横向的布局
  return new Expanded(
      flex: 1,
      //居中显示
      child: new Center(
        //横向布局
        child: new Row(
          //主轴居中，即横向居中
          mainAxisAlignment: MainAxisAlignment.center,
          //大小按照最大充满
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Icon(
              icon,
              size: 16.0,
              color: Colors.grey,
            ),
            new Padding(padding: new EdgeInsets.only(left: 5.0)),
            new Text(
              text,
              style: TextStyle(color: Colors.black, fontSize: 14.0),
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
            ),
          ],
        ),
      ));
}
